<template>
  <div>
    <el-row>
      <el-card>
        <el-col :span="24">
          <el-form :model="queryCriteria" label-width="150px">
            <el-col :span="8">
              <el-form-item label="学生名称:" prop="studentName">
                <el-input
                  v-model="queryCriteria.studentName"
                  placeholder="请输入学生名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学生班级:" prop="parameterClass">
                <el-input
                  v-model="queryCriteria.studentClass"
                  placeholder="请输入学生班级"
                />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <flex-center>
                <el-button round type="info" @click="resetHandler">
                  重置
                </el-button>
                <el-button round type="primary" @click="queryHandler">
                  查询
                </el-button>
              </flex-center>
            </el-col>
          </el-form>
        </el-col>
      </el-card>
      <el-col :span="24">学生列表</el-col>
      <el-col :span="24">
        <el-table :data="pagination.list">
          <el-table-column type="selection" label="全选" />
          <el-table-column
            prop="studentClass"
            align="center"
            :show-overflow-tooltip="true"
            label="学生班级"
          />
          <el-table-column
            prop="studentName"
            align="center"
            :show-overflow-tooltip="true"
            label="学生姓名"
          />
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BaseQueryPageForm from '@/views/common/mixins/BaseQueryPageForm'
import * as studentAPI from '@src/demo/api/student'
export default {
  mixins: [BaseQueryPageForm],
  data() {
    const queryCriteria = this.initQueryCriteria()
    return {
      queryCriteria: queryCriteria,
    }
  },
  methods: {
    executeQueryPage() {
      studentAPI.queryPageStudents(this.createQueryParams()).then((data) => {
        this.queryResultHandler(data)
      })
    },
    initQueryCriteria() {
      return {
        studentName: '',
        studentClass: '',
      }
    },
  },
}
</script>
